<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 50%;
				border:1px solid black;
				margin: 0 auto;
				/*border-spacing：指定边框之间的距离*/
				/*border-collapse 设置边框的合并*/
				border-collapse:collapse;
			}
			td{
				border:1px solid black;
			}
			/*
			 如果表格中没有使用tbody而是直接使用tr
			   那么浏览器会自动创建一个tbody，并且将tr全部放在tbody中
			   tr不是table的子元素，所以下面写table>tr:nth-child(2n)是不起作用的
			   */
			tbody>tr:nth-child(2n){
				background-color:yellow;
				}
				
				
			.box1{
				width: 300px;
				height: 300px;
				background-color: #BBFFAA;
				/*将元素设置成单元格td实现子元素在父元素正中间*/
				display: table-cell;
				vertical-align: middle;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*margin: 0 auto;*/
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>2</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>3</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>3</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>4</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>5</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
			<tr>
				<td>6</td>
				<td>翟少珂</td>
				<td>女</td>
				<td>辽宁省</td>
			</tr>
		</table>
		
		<div class="box1">
			<div class="box2"></div>
			
		</div>
	</body>
</html>
